import { createRouter, createWebHistory, createWebHashHistory, Router } from 'vue-router';
import { RouteRecordRaw } from 'vue-router';
/*
 createWebHistory 生产环境会造成刷新404
 处理方案
 1.使用hash模式 createWebHistory = >createWebHashHistory

 2.配置nginx 在server里添加 try_files $uri $uri/ /index.html;
  server {
      index index.html index.htm default.php default.htm default.html;
      root /xx/xx/xxx;
      try_files $uri $uri/ /index.html;
  }
*/
import Layout from '@/layout/index.vue';
/**
 * 全站路由配置
 * path : 路由地址
 * redirect : 重定向地址
 * component : 引入具体文件
 * meta : {
 *  title:显示在导航上的名称
 *  root:父级name 用于控制topNavbar菜单选中效果
 *  hidden:是否隐藏 如果为true 则导航栏不会渲染该项
 *  activeMenu:如果该项配置有值 则当前为该条路由时候 高亮导航为activeMenu路由
 *  keepAlive:是否缓存该页面
 * }
 * children:子路由
 */
export const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/401',
    component: () => import('@/error/401/index.vue')
  },
  {
    path: '/:pathMatch(.*)*',
    component: () => import('@/error/404/index.vue')
  }
];

export const asyncRoutes: Array<RouteRecordRaw> = [
  {
    path:'/demo',
    name:'demo',
    component: () => import('@/views/demo/index.vue'),
    meta: { title: 'demo' , hidden:true },
  },
  {
    path: '/components',
    name: 'components',
    component: Layout,
    meta: { title: '组件' },
    children: [
      {
        path: '/components/table',
        name: 'componentsTable',
        meta: {
          title: '表格',
          root: 'components'
        },
        component: () => import('@/views/components/table/index.vue'),
      },
      {
        path: '/components/button',
        name: 'componentsButton',
        meta: {
          title: '按钮',
          root: 'components'
        },
        component: () => import('@/views/components/button/index.vue'),
      },
      {
        path: '/components/icon',
        name: 'componentsIcon',
        meta: {
          title: '图标',
          root: 'components'
        },
        component: () => import('@/views/components/icon/index.vue'),
      },
    ],
  },
  {
    path: '/home',
    name: 'home',
    component: Layout,
    meta: { title: '系统' },
    children: [
      {
        path: '/home/index',
        name: 'homeIndexTest',
        meta: {
          title: '系统列表',
          root: 'home',
          keepAlive: true
        },
        component: () => import('@/views/home/index.vue'),
      },
      {
        path: '/home/edit',
        name: 'homeEdit',
        meta: {
          title: '系统编辑',
          root: 'home',
          hidden: true,
          activeMenu: '/home/index'
        },
        component: () => import('@/views/home/edit.vue'),
      },
    ],
  },
  {
    path: '/project',
    name: 'project',
    component: Layout,
    meta: { title: '项目设置' },
    children: [
      {
        path: '/project/index',
        name: 'projectIndex',
        meta: {
          title: '路由鉴权测试',
          root: 'project'
        },
        component: () => import('@/views/project/index.vue'),
      },
    ],
  }
];

// 导出路由
const router: Router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;
